<template>
	<view class="page">
		<div class="sc-card marginlr0">
			<div class="img-box" style="height:45vw; background-image:url(https://imgs.qunarzz.com/p/tts9/1908/e5/ae14cb05c5d23a02.png_640x360_d9633b29.png); background-size: cover; border-radius: 0;"></div>
			<span class="sc-mark-rb"><a class="iconfont icon-tupian"></a></span>
			<span class="sc-mark-rb right"><a class="iconfont icon-shanchu"></a></span>
		</div>
		<!-- pic end -->
		<div class="weui-cells_form ">
			<div class="weui-cells ">
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">组织名称</label></div>
					<div class="weui-cell__bd">
						<!-- <input class="weui-input" pattern="[0-9]*" placeholder="郑州校友会" type="number"> -->
						郑州校友会
					</div>
				</div>
				<div class="weui-cell weui-cell_select weui-cell_select-after">
					<div class="weui-cell__hd">
						<label for="" class="weui-label">组织分类</label>
					</div>
					<div class="weui-cell__bd">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input weui-select">{{array[index]}}</view>
						</picker>
					</div>
				</div>
				<div class="weui-cell atop">
					<div class="weui-cell__hd"><label class="weui-label">组织宣言</label></div>
					<div class="weui-cell__bd">
						<textarea class="weui-textarea" placeholder="请输入内容" rows="4"></textarea>
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label for="" class="weui-label">成立日期</label></div>
					<div class="weui-cell__bd">
						    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						        <view class="uni-input">{{date}}</view>
						    </picker>
					</div>
				</div>
			</div>
			<!-- weui-cells end -->
			<div class="weui-cells">
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">联系人</label></div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="凡凡" />
					</div>
				</div>
				<div class="weui-cell ">
					<div class="weui-cell__hd">
						<label class="weui-label">手机号</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="tel" placeholder="12919014727" />
					</div>
				</div>
				<div class="weui-cell ">
					<div class="weui-cell__hd">
						<label class="weui-label">固定电话</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="tel" placeholder="固定电话" />
					</div>
				</div>
				<div class="weui-cell ">
					<div class="weui-cell__hd">
						<label class="weui-label">邮箱地址</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="email" placeholder="邮箱地址" />
					</div>
				</div>
				<div class="weui-cell ">
					<div class="weui-cell__hd">
						<label class="weui-label">通讯地址</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" name="address" placeholder="详细地址" />
					</div>
				</div>

			</div>
			<!-- weui-cells end -->
			<div class="sc-card sc-mr-card">

				<p>
					<image class="mrImg" src="../../static/img/mr.jpg" mode="" ></image>
				</p>
				<p class="mr-icon sc-icon-flex"><a class="iconfont icon-tupian"></a>
					<a class="iconfont icon-shanchu"></a></p>

			</div>
			<div class=" weui-cells ">
				<div class="weui-cell atop">
					<div class="weui-cell__hd"><label class="weui-label">备注</label></div>
					<div class="weui-cell__bd">
						<textarea class="weui-textarea" placeholder="填写组织备注" rows="4"></textarea>
					</div>
				</div>
			</div>
			<!-- weui-cells end -->
		</div>
		<div class="page-bd-15 margin10-t">
			<a href="javascript:;" class="weui-btn weui-btn_primary" id="a" style="width: auto;">提 交</a>
		</div>
	</view>
</template>

<script>
export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title: 'picker',
				array: ['全国', '省级', '市级'],
				index: 0,
				date: currentDate,
				time: '12:01'
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.page{
		background: #f7f7f7;
	}
	.sc-mark-rb {
		border-radius: 50%;
		bottom: 0.825em !important;
		color: #fff;
		width: 1.75rem;
		height: 1.75rem;
		line-height: 1.75rem;
		position: absolute;
		right: 3rem;
		text-align: center;
		padding: 0.1em;
		background-color: rgba(255, 255, 255, 0.5);
	}

	.sc-mark-rb.right {
		right: 0.5rem;
	}

	.sc-mark-rb a {
		color: #000;
		font-size: 1rem;
		opacity: 1;
	}

	.marginlr0 {
		margin: 0.625rem 0 !important;
	}

	.weui-cell:before {
		left: 0;
	}
	.mrImg{
		    width: 80px;
		    height: 80px;
	}
	.sc-icon-flex{
		display: flex;
		justify-content: center;
	}
</style>
